import { TableConfigInit } from '@/shared/class'
import { FormType } from '@/shared/enum'
import { h, reactive } from 'vue'
import { ElButton } from 'element-plus'
import { TagManageClass } from './controller'
import { Delete } from '@element-plus/icons-vue'
export class ConfigClass {
	tagManageClass
	constructor(tagManageClass: TagManageClass) {
		this.tagManageClass = tagManageClass
	}
	public config = new TableConfigInit()
	public tableConfig = {
		...this.config.getDefaultConfig(),
		sortLabel: '序号',
		columns: [
			{
				label: '标签名称',
				key: 'tagName',
				slotComponent: scope => {
					return h(
						'span',
						{
							style: {
								color: '#67c23a',
								background: '#f0f9eb',
								padding: '5px 5px',
								borderRadius: '5px 5px'
							}
						},
						scope.row.tagName
					)
				}
			},
			{
				label: '创建时间',
				key: 'createdAt'
			},
			{
				label: '操作',
				key: 'operate',
				slotComponent: scope => {
					return h('div', [
						h(ElButton, {
							type: 'danger',
							circle: true,
							icon: Delete,
							onClick: () => {
								this.tagManageClass.delete(scope.row.id)
							}
						})
						// h(
						// 	ElButton,
						// 	{
						// 		type: 'primary',
						// 		link: true,
						// 		onClick: () => {
						// 			this.tagManageClass.edit(scope.row)
						// 		}
						// 	},
						// 	'编辑'
						// )
					])
				}
			}
		]
	}

	public searchCol = [
		{
			label: '标签名称',
			key: 'tagName',
			value: '',
			type: FormType.INPUT
		}
	]

	/**
	 * 编辑用户信息配置
	 */
	public formCol = [
		{
			label: '标签名称',
			key: 'tagName',
			value: '',
			type: FormType.INPUT,
			span: 24,
			rules: [
				{
					required: true,
					message: '请输入'
				}
			]
		}
	]

	/**
	 * 编辑按钮配置
	 */
	public btns = reactive([
		{
			label: '取消',
			key: 'cancel',
			click: () => {
				this.tagManageClass.visible.value = false
			}
		},
		{
			label: '确认',
			key: 'cancel',
			type: 'primary',
			loading: false,
			click: item => {
				this.tagManageClass.addTag(item)
			}
		}
	])
}
